<template>
  <div>
    <div class="property-title">{{ $t('message.kkpddxx') }}</div>
    <div class="doumee-filter">
      <el-form inline label-suffix="：" @submit.native.prevent>
        <el-form-item :label="$t('message.ddbh')">
          <el-input
            v-model="filters.orderId"
            clearable
            :placeholder="$t('message.qsr') + $t('message.ddbh')"
          />
        </el-form-item>
        <el-form-item :label="$t('message.ddlx')">
          <el-select
            v-model="filters.orderType"
            :placeholder="$t('message.qxz') + $t('message.ddlx')"
            clearable
          >
            <el-option
              v-for="item in orderTypeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('message.zffs')">
          <el-select
            v-model="filters.payMethod"
            :placeholder="$t('message.qxz') + $t('message.zffs')"
            clearable
          >
            <el-option
              v-for="item in payTypes"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('message.ddje')">
          <el-input
            v-model="filters.stratAmot"
            clearable
            :placeholder="$t('message.qsr') + $t('message.ddzxje')"
          />
          <span class="ml10 mr10">~</span>
          <el-input
            v-model="filters.endAmot"
            clearable
            :placeholder="$t('message.qsr') + $t('message.ddzdje')"
          />
        </el-form-item>
      </el-form>

      <el-button v-preventReClick type="primary" @click="getList(1)">{{ $t('message.cz') }}</el-button>
      <!-- <el-button v-preventReClick @click="clearList">{{ $t('message.clear') }}</el-button> -->
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column
        align="center"
        :label="$t('message.ddh')"
        width="240"
        prop="id"
      />
      <el-table-column
        align="center"
        :label="$t('message.ddxq')"
        prop="orderInfo"
        width="260"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="$t('message.ddje')"
        prop="price"
        min-width="80"
      />
      <el-table-column
        align="center"
        :label="$t('message.kkpje')"
        prop="invoiceMoney"
        min-width="100"
      />
      <el-table-column
        align="center"
        :label="$t('message.ddlx')"
        prop="orderType"
        min-width="80"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="$t('message.ddly')"
        prop="source"
        min-width="100"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="$t('message.zffs')"
        prop="payMethod"
        min-width="100"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="$t('message.skxx')"
        prop="userInfo"
        min-width="120"
        show-overflow-tooltip
      />
    </el-table>
    <div class="total_order df_ac">
      <div class="item">
        <div>{{ $t('message.yxzdd') }}</div>
        <div class="value"><span style="font-size: 16px;font-weight: 500;">{{ multipleSelection.length }} </span>{{ $t('message.gei') }}</div>
      </div>
      <div class="flex1">
        <div>{{ $t('message.zdkpjey') }}</div>
        <div class="value" style="color: orange;font-size: 16px;font-weight: 500;">{{ $t('message.rmbfh') }} {{ totalInvoiceMoney }}</div>
      </div>
      <el-button type="primary" @click="openEnterModal">{{ $t('message.qrkp') }}</el-button>
    </div>
    <Paginations
      :total="total"
      :page="pagination.page"
      @current-change="currentPageChange"
      @SizeChange="pageSizeChange"
    />
    <!-- <div style="text-align: center">
      <el-button v-preventReClick :loading="subLoading" type="primary" @click="confirmBtn">{{ $t('message.tj') }}</el-button>
    </div> -->
    <el-dialog :title="$t('message.kpqr')" width="680px" :visible.sync="isShowModalSub" :close-on-click-modal="modalDialog" :close-on-press-escape="modalDialog">
      <div>
        <div class="mb30">
          <div class="text">
            <span>{{ $t('message.yx') }}</span>
            <span>{{ multipleSelection.length }}</span>
            <span>{{ $t('message.gddyjkpje') }}</span>
            <span class="secondColor">{{ totalInvoiceMoney }}</span>
          </div>
          <div class="placeholder9" style="margin-top: 4px;">{{ $t('message.yjkpjeck') }}</div>
        </div>
        <el-form
          ref="ruleForm"
          class="doumee-form"
          :model="param"
          :rules="rules"
          label-width="auto"
          style="width: 600px"
          label-suffix="："
        >
          <el-form-item :label="$t('message.ttlx')" prop="type">
            <el-radio v-model="param.type" label="0">{{ $t('message.qydw') }}</el-radio>
            <el-radio v-model="param.type" label="1">{{ $t('message.grfqydw') }}</el-radio>
          </el-form-item>
          <el-form-item :label="$t('message.ttname')" prop="company_title">
            <el-autocomplete
              ref="companyTitleRef"
              v-model="param.company_title"
              style="width: 100%"
              :fetch-suggestions="queryRiseList"
              :placeholder="$t('message.qsr') + $t('message.ttname')"
              @select="handleRiseSelect"
            >
              <el-button slot="append" @click="clearMember">{{ $t('message.clear') }}</el-button>
            </el-autocomplete>
          </el-form-item>
          <el-form-item
            v-if="param.type==0"
            :label="$t('message.gssh')"
            prop="company_tax"
          >
            <el-input
              v-model="param.company_tax"
              :placeholder="$t('message.qsr') + $t('message.gssh')"
              clearable
            />
          </el-form-item>
          <el-form-item :label="$t('message.dzyx')" prop="email">
            <el-input v-model="param.email" clearable :placeholder="$t('message.yyjsdzfp')" />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShowModalSub = false">{{ $t('message.qxkp') }}</el-button>
        <el-button
          v-preventReClick
          :loading="subLoading"
          type="primary"
          @click="confirmBtn"
        >{{ $t('message.qdkp') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { parseTime } from '@/utils/index'
import { debounce } from '@/utils/debounce'
import {
  configList,
  orderTypeList,
  makeInvoiceNoMember,
  orderInvoiceListPC,
  getComminRiseListPost
} from '@/api'

export default {
  name: 'InvoiceNoMember',
  data() {
    return {
      isShowModalSub: false,
      modalDialog: this.$store.modalDialog,
      subLoading: false,
      meta: [],
      list: [],
      pagination: {
        page: 1,
        rows: 10
      },
      total: 0,
      orderTypeList: [],
      form: {},
      filters: {},
      param: {
        company_title: '',
        company_tax: '',
        type: '',
        email: ''
      },
      listLoading: false,
      showMessage: false,
      showAddInvoiceTitle: false,
      cardMessage: {},
      payTypes: [],
      titleList: [],
      multipleSelection: [],
      rules: {
        type: [{ required: true, message: this.$t('message.qxz') + this.$t('message.ttlx'), trigger: 'blur' }],
        company_title: [{ required: true, message: this.$t('message.qsr') + this.$t('message.ttname'), trigger: 'blur' }],
        company_tax: [{ required: true, message: this.$t('message.qsr') + this.$t('message.gssh'), trigger: 'blur' }],
        email: [
          { required: true, message: this.$t('message.qsr') + this.$t('message.jsyx'), trigger: 'blur' },
          { pattern: /^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/, message: this.$t('message.qsrzrdyx'), trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    totalInvoiceMoney() {
      let total = 0
      this.multipleSelection.forEach(item => {
        total += item.invoiceMoney
      })
      return total
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
    this.payTypesList()
    this.getOrderTypeList()
  },
  methods: {
    payTypesList() {
      configList({ param: { type: '2', code: 'PAY_METHOD_INVOICE' }})
        .then((res) => {
          if (res.errorCode !== '000000') return
          this.payTypes = res.recordList
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 获取订单类型列表
    getOrderTypeList() {
      orderTypeList({ param: { type: 'ORDER_TYPE_INVOICE_FIT' }})
        .then((res) => {
          if (res.errorCode !== '000000') return
          this.orderTypeList = res.recordList
          // this.$set(this.filters, 'orderType', this.orderTypeList[0].id)
          this.getList()
        })
    },
    handleRiseSelect(row) {
      this.$set(this, 'param', row)
      this.$refs.ruleForm.clearValidate()
    },
    clearMember() {
      this.param = {
        company_title: '',
        company_tax: '',
        type: '',
        email: ''
      }
      setTimeout(() => {
        this.$refs.companyTitleRef.focus()
      })
    },
    // 散客抬头列表
    // queryRiseList() {
    //   const param = this.param
    //   const pagination = {
    //     page: 1,
    //     rows: 30
    //   }
    //   getComminRiseListPost({ param, pagination }).then(

    //   )
    // },
    queryRiseList: debounce(function(queryString, cb) {
      const data = {
        pagination: {
          page: 1,
          rows: 30
        },
        param: this.param
      }
      getComminRiseListPost(data).then((res) => {
        if (res.errorCode !== '000000') return
        const result = res.recordList
        result.forEach((item) => {
          item.value = item.company_title
        })
        cb(result)
      })
    }),
    currentPageChange(val) {
      this.pagination.page = val
      this.getList()
    },
    pageSizeChange(val) {
      this.pagination.rows = val
      this.getList()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      // console.log(11, val)
    },
    openEnterModal() {
      if (!this.multipleSelection || this.multipleSelection.length === 0) {
        this.$message.error(this.$t('message.qxzykjfpddd'))
        return false
      }
      this.isShowModalSub = true
      this.$nextTick(() => {
        this.$refs.ruleForm.resetFields()
      })
    },
    confirmBtn() {
      const multipleSelection = this.multipleSelection
      const ids = []
      multipleSelection.forEach((e) => {
        ids.push(e.id)
      })
      const param = { ...this.param }
      param.titleId = param.id
      param.ids = ids
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.subLoading = true
          makeInvoiceNoMember({
            param
          })
            .then((res) => {
              this.subLoading = false
              if (res.errorCode === '000000') {
                this.ruleForm = {}
                this.$message.success(this.$t('message.fpkjcg'))
                this.$emit('changeTabs', '0')
              }
            })
            .catch((err) => {
              this.subLoading = false
              console.log(err)
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    clearList() {
      this.filters = {}
      this.getList(1)
    },
    getList(page) {
      this.listLoading = true
      const { filters, pagination } = this
      const venueId = sessionStorage.getItem('venueId')
      filters.flag = '2'
      if (page) {
        pagination.page = page
        this.pagination.page = page
      }
      pagination.firstQueryTime = parseTime(new Date())
      orderInvoiceListPC({ pagination, param: { venueId, ...filters }})
        .then((res) => {
          this.listLoading = false
          if (res.errorCode !== '000000') return
          this.list = res.recordList
          this.total = res.totalCount
        })
        .catch(() => {
          this.listLoading = false
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.total_order{
  border: 1px solid #e8ebf6;
  padding: 16px;
  .item{
    margin-right: 60px;
  }
  .value{
    margin-top: 4px;
  }
}
.card-message {
  margin-top: 10px;
  background-color: #f2f2f2;
  height: 60px;
  line-height: 20px;
  .first-line {
    height: 30px;
    padding: 5px;
    .message-title-style {
      color: #999;
    }
    .card-name-style {
      display: inline-block;
      border: 1px #999 solid;
      border-radius: 4px;
      background-color: #fff;
      font-size: 12px;
      padding-left: 5px;
      padding-right: 5px;
      height: 20px;
      text-align: center;
    }
    .close-style {
      font-size: 20px;
      float: right;
      margin-right: 5px;
      margin-top: -2px;
      padding: 0;
      border: 0px #999 solid;
    }
    .message-value-style {
      margin-right: 15px;
      color: #222;
    }
  }
}
</style>
